<template>
    <el-dropdown>
        <span class="dropdown-trigger">
            <el-badge :value="1">
                <i class="icon icon-bell"></i>
            </el-badge>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item
                    v-for="item in options"
                    :key="item.key"
                    class="dropdown-link"
                >
                    <RouterLink to="/">{{ item.label }}</RouterLink>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup>
const options = [
    {
        label: '评论',
        key: 'comment',
        path: '',
    },
    {
        label: '赞和收藏',
        key: 'like',
        path: '',
    },
    {
        label: '关注',
        key: 'follows',
        path: '',
    },
    {
        label: '私信',
        key: 'chat',
        path: '',
    },
    {
        label: '系统消息',
        key: 'notice',
        path: '',
    },
]
</script>

<style lang="less" scoped>
.dropdown-trigger {
    cursor: pointer;
    .flex-align-center;
    outline: none;
    .icon {
        font-size: 20px;
    }
    &::focus-visible {
        outline: unset;
    }
    .dropdown-link {
        color: var(--color-link);
        &:hover {
            background-color: #f00;
        }
        > a {
            color: var(--color-link);
        }
    }
}
</style>

<style lang="less">
.dropdown-link {
    > a {
        color: var(--color-link);
    }
}
</style>
